﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" class=" js ">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=" />

<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=0.3">
<title>${field.typetitle}</title>
<meta name="keywords" content="${field.typekeyword}">
<meta name="description" content="${field.typedescrip}">
<link href="/{ms:global.style/}css/webstyle.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="/{ms:global.style/}js/jquery.min.js"></script>
<script type="text/javascript" src="/{ms:global.style/}js/top.js"></script>
<link href="/{ms:global.style/}css/font-awesome.min.css" rel="stylesheet">
<link href="/{ms:global.style/}css/owl.carousel.css" rel="stylesheet">
<link href="/{ms:global.style/}css/grid.1.1.css" rel="stylesheet">
<link href="/{ms:global.style/}css/base.css" rel="stylesheet">
<link href="/{ms:global.style/}css/style.css" rel="stylesheet">
<link href="/{ms:global.style/}css/plugin-style.css" rel="stylesheet">
<link href="/{ms:global.style/}css/el-style.css" rel="stylesheet">
<link href="/{ms:global.style/}css/jquery.mmenu.css" rel="stylesheet">
<script src="/{ms:global.style/}js/jquery-1.11.0.min.js"></script>
<script src="/{ms:global.style/}js/jquery.mmenu.min.js"></script>
<script src="/{ms:global.style/}js/owl.carousel.min.js"></script>
<script src="/{ms:global.style/}js/functions.js"></script>
<script src="/{ms:global.style/}js/sea.js"></script>
<script src="/{ms:global.style/}js/sea.run.js"></script>
 <!--引入vue库-->
 <script type="text/javascript" src="/static/plugins/vue/2.6.9/vue.min.js"></script>
 <!--引入element-ui库-->

 <script src="${base}/static/plugins/element-ui/2.15.8/index.min.js"></script>
 <link rel="stylesheet" href="/static/plugins/element-ui/2.15.8/theme-chalk/index.min.css">

 <!--网络请求框架-->
 <script src="/static/plugins/axios/0.18.0/axios.min.js"></script>
 <script src="/static/plugins/qs/6.6.0/qs.min.js"></script>
 <script src="/static/plugins/ms/2.0/ms.umd.js"></script>
 <script src="/static/plugins/ms/2.0/ms-el-form.umd.js"></script>
 <!-- 引入自定义库 -->
 <script>
  ms.base = "{ms:global.contextpath/}";
 </script>
 <script src="/static/mdiy/index.js"></script>
<script>
website["dataId"]='1020';
</script>
</head>
<body>
<#include "nav.htm" />
<div id="pageOuter">
<#include "head.htm" />
<div class="row" id="el_3522598213636130" path="row">
 <div class="rowFluid">
 <div class="span12">
 <div class="column" id="el_6494216843946920" path="column">
 <div class="pluginWrapper plugin_7171338681727304" id="plugin_7171338681727304" data-areaid="7171338681727304" data-edit="true" path="plugin">
  <div class="pluginContent"> {ms:channel type='parent'}<img src="{@ms:file field.typelitpic/}">{/ms:channel}</div>
 </div>
 </div>
 </div>
 </div>
</div>
<div class="row" id="el_2092707953007557" path="row">
 <div class="rowFluid">
 <div class="span12">
 <div class="column" id="el_7619190977327218" path="column">
 <div class="container">
  <div class="row" id="el_8311408124275697" path="row">
  <div class="rowFluid">
  <div class="span12">
  <div class="column" id="el_1493104552788926" path="column">
   <div class="pluginWrapper plugin_7419736775583996" id="plugin_7419736775583996" data-areaid="7419736775583996" data-edit="true" path="plugin">
   <div class="pluginContent"><a href="/" class="ms-channel-path-index"> 首页 </a>{ms:channel type="path"}     >> <a href={ms:global.html/}${field.typelink} class="ms-channel-path-link">         ${field.typetitle}  </a>     {/ms:channel}</div>
   </div>
  </div>
  </div>
  </div>
  </div>
 </div>
 </div>
 </div>
 </div>
</div>
<div class="row" id="el_4461511272075909" path="row">
 <div class="rowFluid">
 <div class="span12">
 <div class="column" id="el_7619585869411489" path="column">
 <div class="container">
  <div class="row" id="el_7953157636936829" path="row">
  <div class="rowFluid">
  <#include "left.htm" />
  <div class="span9 col-sm-12">
  <div class="column" id="el_1636745740511166" path="column">
   <div class="pluginWrapper plugin_5302834167814756" id="plugin_5302834167814756" data-areaid="5302834167814756" data-edit="false" path="plugin">
   <div class="pluginContent">${field.typetitle}</div>
   </div>
   <div class="pluginWrapper plugin_6788500880195726" id="plugin_6788500880195726" data-areaid="6788500880195726" data-edit="false" path="plugin">
   <div class="pluginContent"> 
   
   <form id="form" ref="form" >
   
   
   <div class="input-row">
    <div class="input-caption"><strong class="required">*</strong>联系人</div>
    <input class="input-text" type="text" v-model="form.username" name="name"  placeholder="联系人">
   </div>
   <div class="input-row">
    <div class="input-caption"><strong class="required">*</strong>联系电话</div>
    <input class="input-text" type="text" v-model="form.mobile" name="tel" placeholder="联系电话">
   </div>
   <div class="input-row">
    <div class="input-caption"><strong class="required">*</strong>联系邮箱</div>
    <input class="input-text" type="text" v-model="form.email" name="email"placeholder="联系邮箱">
   </div>
   <div class="input-row">
    <div class="input-caption"><strong class="required">*</strong>留言内容</div>
    <textarea class="textarea" v-model="form.content" name="content" placeholder="留言内容" rows="4"></textarea>
   </div>

   <div class="input-row" style="height:40px;">  <input @click="save" value="提 交" class='input-button'/></div>
   </form>
   </div>
   </div>
  </div>
  </div>
  </div>
  </div>
 </div>
 </div>
 </div>
 </div>
 <#include "foot.htm" />
</div>
</body>
<script>
 var form = new Vue({
  el: '#form',

  data: function () {
   return {
    isLoading: false,
    form: {
     modelName: '',
     // 名字
     username: '',
     // 电话
     mobile: '',
     //邮箱
     email:'',
     // 留言
     content: ''
    }
   }
  },
  methods: {
   save: function (e) {
    e.preventDefault();//阻止默认事件跳转
    var that = this;
    if (!that.form.username) {
     that.$notify({
      title: '失败',
      type: 'info',
      message: '请输入您的姓名!'
     });
     return;
    }
    if (!(/^([0-9]{3,4}-)?[0-9]{7,8}$|^\d{3,4}-\d{3,4}-\d{3,4}$|^1[0-9]{10}$/ .test(that.form.mobile))) {
     that.$notify({
      title: '失败',
      type: 'info',
      message: '联系电话格式不对!'
     });
     return;
    }
    if(!(/^[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*@[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*\.[a-z]{2,}$/) .test(that.form.email)){
     that.$notify({
      title: '失败',
      type: 'info',
      message: '邮箱格式不对!'
     });
     return;
    }
    if (!that.form.content) {
     that.$notify({
      title: '失败',
      type: 'info',
      message: '请输入您的备注！'
     });
     return;
    }
    that.form.modelName = '在线留言';
    ms.http.post("/mdiy/form/data/save.do", that.form).then(function (res) {
     if (res.result) {
      that.$notify({
       title: '成功',
       type: 'success',
       message: '感谢您的留言!'
      });
      that.form = {
       username: '',
       mobile: '',
       email: '',
       content: ''
      }//提交后清空表单
     } else {
      that.$notify({
       title: '失败',
       message: res.msg,
       type: 'warning'
      });
     }
    })
   }
  }
 })
</script>
</html>
